<template>
  <div>
    <headUser></headUser>
    <div class="information">
      <div class="information_hd">
        <span>基本信息</span>
      </div>
      <div class="information_main border_top">
        <!--<div>-->
        <!--<span class="t">性别：</span>-->
        <!--<span class="sex">{{data.sex}}</span>-->
        <!--</div>-->
        <!--<div>-->
        <!--<span class="t">出生年月：</span>-->
        <!--<span class="birth">{{userInfo.certnum.substring(6,14)}}</span>-->
        <!--</div>-->
        <div>
          <span class="t">身份证号码：</span>
          <span class="sfz">{{data.aac002_t}}</span>
        </div>
        <div>
          <span class="t">社保卡号：</span>
          <span class="sbkh">{{data.aaz500}}</span>
        </div>
        <div>
          <span class="t">社保卡状态：</span>
          <span class="sbkzt">{{data.aaz502_desc}}</span>
        </div>
      </div>
    </div>
    <div class="canbaoxianzhong">
      <div class="canbaoxianzhong_hd">
        <span>参保险种</span>
      </div>
      <div v-show="list.length>0" class="canbaoxianzhong_main">
        <div class="item border_top" v-for="(item,index) in list" :key="index">
          <div class="left">
            <span class="type">{{item.aae140_desc}}</span>
            <span>{{item.company}}</span>
          </div>
          <div class="right">
            <span :class="item.aac008=='3'?'red':''">{{item.aac008_desc}}</span>
          </div>
          <div class="bgt">
            <!--<img src="../../assets/images/right.png" />-->
          </div>
        </div>
      </div>
      <!--<div class="canbaoxianzhong_main">-->
      <!--<div class="item border_top">-->
      <!--<div class="left">-->
      <!--<span class="type">城乡居民社会养老保险</span>-->
      <!--&lt;!&ndash;<span>{{list[0].company}}</span>&ndash;&gt;-->
      <!--</div>-->
      <!--<div class="right">-->
      <!--<span :class="list[0].aac031=='1'?'':'red'">{{list[0].aac031_desc ? list[0].aac031_desc : '未参保'}}</span>-->
      <!--</div>-->
      <!--<div class="bgt">-->
      <!--&lt;!&ndash;<img src="../../assets/images/right.png" />&ndash;&gt;-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <!--<div class="zhanghuxinxi">-->
    <!--<div class="zhanghuxinxi_hd">-->
    <!--<span>账户信息</span>-->
    <!--</div>-->
    <!--<div class="zhanghuxinxi_main">-->
    <!--<div class="item">-->
    <!--<span>养老保险</span>-->
    <!--<div class="money wscx01">-->
    <!--¥{{data.endowmentZhye}}.00-->
    <!--</div>-->
    <!--<span>累计账户余额</span>-->
    <!--</div>-->
    <!--<div class="item border">-->
    <!--<span>医疗保险</span>-->
    <!--<div class="money wscx02">-->
    <!--¥{{data.medicalZhye}}.00-->
    <!--</div>-->
    <!--<span>历史账户余额</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <div class="no_more" v-show="list.length==0">
      <i><img src="../../assets/images/no_infor.png"/></i>
      <label>您还没有参保信息！</label>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data () {
      return {
        token: localStorage.getItem("token"),
        cardNum:'',
        data: [],
        list: []
      }
    },
    methods: {
      //获取社保卡信息
      getData(){
        this.$http.get("/jkakrs_sbk_004", {
          params: {
            access_token: this.token,
            AAC002: this.cardNum
          }
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.data = res.body;
          }
        });
      },
      //获取个人参保记录
      getDataList(){
        this.$http.get("/jkakrs_jmyl_cbxzlb", {
          params: {
            access_token: this.token,
            AAC002: this.cardNum
          }
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.list = res.body;

          }
        });
      },
    },
    created(){
      let userinfo=JSON.parse(localStorage.getItem("userInfo"));
      this.cardNum=userinfo.certnum;
      this.getData();
      this.getDataList();
    }
  }
  document.body.style.background = "#F2F2F2"
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .information,.canbaoxianzhong,.zhanghuxinxi{background: #FFFFFF;margin-top: 15px;}
  .information .information_hd,.canbaoxianzhong .canbaoxianzhong_hd,.zhanghuxinxi .zhanghuxinxi_hd{height: 44px;box-sizing: border-box;padding:13px 0 0 15px}
  .information .information_hd span,.canbaoxianzhong .canbaoxianzhong_hd span,.zhanghuxinxi .zhanghuxinxi_hd span{border-left: 3px solid #3399FF;font-size: 14px;padding-left: 16px;}


  .information .information_main{box-sizing: border-box;padding: 15px;font-size: 14px;line-height: 34px;}
  .information .information_main .t{display:inline-block;width: 40%;color: #888888;}
  .information .information_main .sex,.information .information_main .birth,.information .information_main .sfz,.information .information_main .sbkh,.information .information_main .sbkzt{color: #000000;font-family: arial;}
  .information .information_main .sbkzt{font-weight: 600;color: #FF0800;}

  .canbaoxianzhong .canbaoxianzhong_main>div.item{box-sizing: border-box;padding: 13px 15px;position: relative;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item a{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div{display: inline-block;vertical-align: middle;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.left{width:60%}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.left>span{display: block;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.left>span.type{color: #333333;margin-bottom: 7.8px;font-size: 14px;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.left>span{font-size: 14px;color: #999999;font-size: 13px;line-height: 14px;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.right{position:absolute;top:50%;margin-top:-11px;right:30px}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.right>span{font-size: 14px;border:1px solid #00CB01;color: #00CB01;border-radius: 4px;box-sizing: border-box;padding:2px 11px;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.right>span.red{font-size: 14px;border:1px solid red!important;color: red!important;border-radius: 4px;box-sizing: border-box;padding:2px 11px;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.bgt{position: absolute;top: 50%;vertical-align: middle;height: 25px;margin-top: -13px;right: 8px;}
  .canbaoxianzhong .canbaoxianzhong_main>div.item>div.bgt img{display: inline-block;vertical-align: middle;}

  .zhanghuxinxi .zhanghuxinxi_main .item{box-sizing: border-box;padding: 15px;width: 48%;display: inline-block;}
  .zhanghuxinxi .zhanghuxinxi_main span{color: #888888;display: block;margin-top: 5px;font-size: 14px;line-height: 30px;}
  .zhanghuxinxi .zhanghuxinxi_main div.money{color: #151515;font-size: 21px;line-height: 35px;}
  .zhanghuxinxi .zhanghuxinxi_main .item.border{border-left: 1px solid #E8E8E8;}
  .zhanghuxinxi .zhanghuxinxi_hd{border-bottom: 1px solid #E8E8E8;}
  .la-ball-spin{margin-left: 25px;}

  .head{width: 100%;margin-bottom: 10px;padding:12px 0 12px 15px;box-sizing: border-box;background: #FFFFFF;}
  .head .img{width: 45px;height: 45px;border-radius: 100%;box-sizing: border-box;float:left;margin-right: 25px;overflow:hidden;}
  .head .img img{width: 100%;}
  .head div.name{font-size: 15px;margin-top: 5px;}
  .head div.card{font-size: 12px;margin-top: 5px;color: #888888;}

  .head .change{float:right;right: 50px;text-align: center;width: 60px;font-size: 12px;color: #6CACDE;}
  .head .change img{width: 30px;margin-bottom: 5px;margin-top: 2px;}
  .clear {zoom:1;clear:both;}
  .clear :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
  .no_more>i{display: block;width: 40%;margin: 20px auto;}
  .no_more>label{display: block;width: 100%;text-align: center;}

</style>
